import React, { Component } from 'react';
import {
	StyleSheet, Text, View, Image, TouchableOpacity, ScrollView, PixelRatio
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import { Common } from '../../../../component/common/Common';
import { orderStyle, commonStyle, commen } from '../_common/style';
import OrderDetailsService from '../_common/service';

const scale = GLOBAL.SCALE;

export class InvoiceDetailsPage extends Component {
	static navigationOptions = ({ navigation }) => {
		let { orderType } = navigation.state.params || {}
		return {
			headerTitle: (orderType == 'P' ? '采购' : '销售') + '订单-结算明细',
			headerTintColor: '#272727',
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#272727' />,
			headerRight: (<Image style={{ marginLeft: 18 * scale, width: 9 * scale, height: 16 * scale }} source={require('../../../../imgs/goBackEmpty.png')} />),
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center'
			},
			headerStyle: {
				elevation: 0,
				backgroundColor: '#F5F5F5',
				borderBottomWidth: 0,
			},
		}
	};

	constructor(props) {
		super(props);
		let { orderType, orderId, settleId } = this.props.navigation.state.params || {}
		console.log('页面传递参数', props)
		this.propsSend = { orderType, orderId, settleId };
		this.state = {
			isVisible: false,
			detailData: null
		}
	}

	async	componentWillMount () {
		OrderDetailsService.initAPI(this.propsSend.orderType);
		this._init();
	}

	componentWillUnmount () {

	}

	//初始调用
	_init = () => {
		this._getDetailsData();
	}

	// 获取数据
	_getDetailsData = async () => {
		let { orderId, settleId } = this.propsSend;
		let responseData = await OrderDetailsService.jsDetail({ orderId, settleId });
		console.log('结算详情数据', responseData)
		if (!responseData) return;
		this.setState({ detailData: responseData })
	}


	render () {
		let { detailData } = this.state;
		let { settleId, appSettleStatusName, settledQuantity, settledAmount, appStockSheetTOList } = detailData || {};
		return (
			<View style={styles.container}>
				<ScrollView style={{ flex: 1 }}>
					<View style={styles.itemBox}>
						<View style={[styles.itemBody]}>
							<View style={styles.detailsHead}>
								<View style={[commonStyle.row2, styles.headPd]}>
									<Text style={styles.detailsHeadTitle}>结算单 {settleId}</Text>
									<Text style={styles.detailsHeadStatus}>{appSettleStatusName || '-'}</Text>
								</View>
								<View style={[commonStyle.row2, styles.topp]}>
									<View style={[commonStyle.row3, { flex: 1 }]}>
										<Text style={orderStyle.lable}>结算量(吨)</Text>
										<Text style={orderStyle.value}>{settledQuantity || '-'}</Text>
									</View>
									<View style={[commonStyle.row3, { flex: 1 }]}>
										<Text style={orderStyle.lable}>结算总额(元)</Text>
										<Text style={orderStyle.value}>¥{settledAmount || '-'}</Text>
									</View>
								</View>
							</View>
						</View>
					</View>
					{
						appStockSheetTOList && appStockSheetTOList.map((item, index) => {
							return (
								<View key={index}>
									<Text style={[styles.title, orderStyle.loadColor]}>{this.propsSend.orderType == 'S' ? '发货' : '收货'}单 {item.sheetId}</Text>
									<View style={styles.itemBox}>
										<View style={[styles.itemBody]}>

											{
												item.appStockItemTOList && item.appStockItemTOList.map((items, indexs) => {
													return (
														<View key={indexs} style={indexs < item.appStockItemTOList.length - 1 ? [styles.mb, styles.bxian] : null}>
															<Text style={[orderStyle.value, styles.mb]}>{items.goodsName || '-'}</Text>
															<View style={[commonStyle.row3]}>
																<View style={{ flex: 1 }}>
																	<Text style={[commen.lable, styles.pb]}>{this.propsSend.orderType == 'S' ? '发货' : '收货'}量(吨)</Text>
																	<Text style={orderStyle.value}>{items.sendQuantity || '-'}</Text>
																</View>
																<View style={{ flex: 1 }}>
																	<Text style={[commen.lable, styles.pb]}>结算量(吨)</Text>
																	<Text style={orderStyle.value}>{items.settledQuantity || '-'}</Text>
																</View>
																<View style={{ flex: 1 }}>
																	<Text style={[commen.lable, styles.pb]}>结算单价(元/吨)</Text>
																	<Text style={orderStyle.value}>¥{items.settlementPrice || '-'}</Text>
																</View>
															</View>
														</View>
													)
												})
											}


											{/* <View>
												<Text style={[orderStyle.value, styles.mb]}>商品名称</Text>
												<View style={[commonStyle.row3]}>
													<View style={{ flex: 1 }}>
														<Text style={[commen.lable, styles.pb]}>收货量(吨)</Text>
														<Text style={orderStyle.value}>500</Text>
													</View>
													<View style={{ flex: 1 }}>
														<Text style={[commen.lable, styles.pb]}>结算量(吨)</Text>
														<Text style={orderStyle.value}>500</Text>
													</View>
													<View style={{ flex: 1 }}>
														<Text style={[commen.lable, styles.pb]}>结算单价(元/吨)</Text>
														<Text style={orderStyle.value}>¥500</Text>
													</View>
												</View>
											</View> */}
											<Text style={styles.toll}>合计：结算量 {item.settledQuantity || '-'}吨，总额 ¥{item.settledAmount || '-'}元</Text>
										</View>
									</View>
								</View>
							)
						})
					}


				</ScrollView >
			</View >
		)
	}
}


const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#F5F5F5'
	},
	detailsHead: {
		//...commen.edge
	},
	title: {
		...commen.edge,
		fontSize: 14 * scale,
		color: style.color.font1
	},
	detailsHeadTitle: {
		fontSize: 14 * scale,
		color: style.color.font1
	},
	detailsHeadText: {
		fontSize: 14 * scale,
		color: style.color.font1
	},
	detailsHeadStatus: {
		fontSize: 14 * scale,
		color: style.color.font1
	},
	topp: {
		marginBottom: 10 * scale
	},

	headPd: {
		paddingTop: 8 * scale,
		paddingBottom: 15 * scale,
	},
	itemBox: {
		...commen.edge,
		marginBottom: 20 * scale
	},
	itemBody: {
		backgroundColor: style.color.white,
		borderRadius: 4 * scale,
		paddingTop: 15 * scale,
		paddingBottom: 15 * scale,
		marginTop: 5 * scale,
		...commen.edge
	},
	bao: {
		paddingBottom: 15 * scale,
		marginBottom: 10 * scale,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: '#E3E7F0',
	},
	pb: {
		paddingBottom: 5 * scale
	},
	mb: {
		marginBottom: 15 * scale
	},
	bxian: {
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: '#E3E7F0',
		paddingBottom: 10 * scale
	},
	goodsTitleBox: {
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: '#E3E7F0',
		position: 'relative',
		flexDirection: 'row',
		justifyContent: 'center',
		marginBottom: 15 * scale
	},
	goodsTitle: {
		position: 'absolute',
		top: -7 * scale,
		fontSize: 14 * scale
	},
	bstyle: {
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: '#E3E7F0',
		paddingBottom: 15 * scale,
		marginBottom: 15 * scale
	},
	toll: {
		color: style.color.fontRed1,
		paddingTop: 15 * scale,
		textAlign: 'right'
	}
})